<template>
	<view class="content">
		<!-- 轮播图 -->

		<view class="swiper-box">
			<swiper lass="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true">
				<swiper-item v-for="(swiper,index) in swiperList" :key="index">
					<image :src="swiper" @tap="preImage" :data-src="swiper" :data-index="index" :data-srcs="swiperList"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- <swiper class="screen-swiper round-dot"  indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(swiper,index) in swiperList" :key="swiper.id">
				<image :src="swiper" @tap="preImage" :data-src="swiper" :data-index="index" :data-srcs="swiperList"></image>
			</swiper-item>
		</swiper> -->


		<detail-item :options="buldingInfo.house" :isLike="buldingInfo.isLike"></detail-item>
		<view class="cu-list grid col-4 no-border toolbar">
			<navigator class="cu-item" url="/pages/map/map">
				<view class="lg text-white cuIcon-location">
				</view>
				<text>地图找房</text>
			</navigator>
			<navigator class="cu-item" :url="'/pages/new/detail/ask?id='+buldingInfo.house.id">
				<view class="lg text-white cuIcon-question">
				</view>
				<text>楼盘问问</text>
			</navigator>
			<navigator class="cu-item" :url="'/pages/new/detail/detail-info?id='+buldingInfo.house.id">
				<view class="lg text-white cuIcon-form">
				</view>
				<text>楼盘说辞</text>
			</navigator>
			<navigator class="cu-item" :url="'/pages/new/detail/images?thumb_url='+buldingInfo.house.thumb_url
			+'&thumb_1='+buldingInfo.house.thumb_1
			+'&thumb_2='+buldingInfo.house.thumb_2
			+'&thumb_3='+buldingInfo.house.thumb_3">
				<view class="lg text-white cuIcon-pic">
				</view>
				<text>楼盘图片</text>
			</navigator>
		</view>

		<view class="cu-bar bg-white margin-top" v-if="buldingInfo.saleList.length!=0">
			<view class="action"><text class="cuIcon-titles text-red"></text>为您推荐优秀的渠道驻场</view>
			<navigator class="text-right" :url="'/pages/guwen/list?type=sale&houseid='+buldingInfo.house.id">更多>></navigator>
		</view>
		<view class="cu-list grid col-3 no-border zhuchangList" v-if="buldingInfo.saleList.length!=0">
			<navigator class="zhuchang" v-for="saler in buldingInfo.saleList" :key="saler.id" :url="'/pages/guwen/detail?id='+saler.id">
				<view class="image">
					<image class="cu-avatar xl round" :src="(saler.avatar.indexOf('http')!=-1)?saler.avatar:imgRoot+saler.avatar"></image>
				</view>
				<view class="name">{{saler.name}}</view>
				<view class="company text-gray">{{saler.platform}}</view>
				<view class="Addr text-gray">{{saler.housename}}</view>
				<view v-if="saler.money!=''&saler.money!=null" class="price text-red">佣金：{{saler.money}}</view>
			</navigator>

		</view>

		<view class="cu-bar bg-white margin-top" v-if="buldingInfo.gwList.length!=0">
			<view class="action"><text class="cuIcon-titles text-red"></text>为您推荐优秀的置业顾问</view>
			<navigator class="text-right" :url="'/pages/guwen/list?type=gw&houseid='+buldingInfo.house.id">更多>></navigator>
		</view>
		<view class="cu-list grid col-3 no-border zhuchangList" v-if="buldingInfo.gwList.length!=0">
			<navigator class="zhuchang" v-for="saler in buldingInfo.gwList" :key="saler.id" :url="'/pages/guwen/detail?id='+saler.id">
				<view class="image">
					<image class="cu-avatar xl round" :src="(saler.avatar.indexOf('http')!=-1)?saler.avatar:imgRoot+saler.avatar"></image>
				</view>
				<view class="name">{{saler.name}}</view>
				<view class="company text-gray">{{saler.platform}}</view>
				<view class="Addr text-gray">{{saler.housename}}</view>
				<view v-if="saler.fxmoney!=''&saler.fxmoney!=null" class="price text-red">佣金：{{saler.fxmoney}}</view>
			</navigator>

		</view>
		<view class="cu-bar bg-white margin-top solid-bottom">
			<view class="action"><text class="cuIcon-titles text-red"></text>楼盘问问</view>
			<navigator class="text-right" :url="'/pages/new/detail/ask?id='+buldingInfo.house.id">更多>></navigator>
		</view>
		<comment-item :comments="buldingInfo.commentList"></comment-item>
		<view class="flex  padding justify-center bg-white">
			<navigator class="cu-btn round bg-grey center" :url="'/pages/comment/create?id='+buldingInfo.house.id">发表评论</navigator>
		</view>
		<promotion-list :options="buldingInfo.likeList" url="/pages/new/index"></promotion-list>
		<view style="height:60px;"> </view>
		<!-- <view class="bottom">
			<button  class="text-black" open-type="contact" style="padding-left: 10px;">
				<text class="cuIcon-peoplefill text-black"></text>
				<text class="text-black">客服</text>
			</button>
			<button style="background-color:#1AAD19" @tap="goGwList" :data-url="'/pages/guwen/list?type=sale&houseid='+buldingInfo.house.id">联系渠道驻场</button>
			<button style="background-color:#007AFF;" @tap="goGwList"  :data-url="'/pages/guwen/list?type=gw&houseid='+buldingInfo.house.id">联系置业顾问</button>
		</view> -->
		<view class="cu-load load-modal" v-if="isLoading">
			<view class="cuIcon-emojifill text-orange"></view>
			<view class="gray-text">{{loadMoreDefalutText}}</view>
		</view>

		<view class="cu-bar bg-white tabbar border shop bottom">
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view>
				客服
			</button>
			<view class="bg-orange submit" @tap="goGwList" :data-url="'/pages/guwen/list?type=sale&houseid='+buldingInfo.house.id">联系渠道驻场</view>
			<view class="bg-red submit" @tap="goGwList" :data-url="'/pages/guwen/list?type=gw&houseid='+buldingInfo.house.id">联系置业顾问</view>
		</view>
	</view>
</template>

<script>
	import detailItem from './detail-item.vue';
	import promotionList from '../../../pages/index/promotion-list.vue';

	import commentItem from '@/pages/comment/item.vue';
	import guwenItem from '@/pages/guwen/item.vue';

	export default {
		components: {
			detailItem,
			promotionList,
			commentItem,
			guwenItem
		},
		data() {
			return {
				id: 0,
				isLike:false,
				memberId:0,
				// 轮播图片
				swiperList: [],
				salers: [],
				buldingInfo: {},
				imgRoot:this.$rootUrl,
				isLoading: true,
				loadMoreDefalutText: '努力加载中...',
				loadMoreNoLeftText: '没有更多了,请掉头行驶...',
				connectionFailText: '连接失败,请检查网络是否断开!',
			}
		},
		computed: {

		},
		onLoad(e) {
			this.id = e.id;
			var me=this;
			
			uni.getStorage({
				key: 'UserInfo',
				success: (res) => {
					if (!res.data) {
						return;
					}
					me.memberId=res.data.id
					this.loadDetailInfo();
					
				},
				fail: (e) => {
					this.loadDetailInfo();
				}
			});
		},
		onShareAppMessage(){
			return {
			      title: '选楼盘，查佣金，看房价'
			    }
		},
		methods: {
			goGwList(e) {
				uni.navigateTo({
					url: e.currentTarget.dataset.url
				})
			},
			preImage(e) {
				var me = this;
				var srcs = e.currentTarget.dataset.srcs;
				var index = e.currentTarget.dataset.index;
				uni.previewImage({
					urls: srcs,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			toDetailInfo(info) {
				uni.navigateTo({
					url: '/pages/new/detail/detail-info'
				})
			},
			toAskList(info) {
				uni.navigateTo({
					url: '/pages/new/detail/ask'
				})
			},
			toImages(info) {
				uni.navigateTo({
					url: '/pages/new/detail/images'
				})
			},
			toMap() {
				uni.navigateTo({
					url: '/pages/map/map'
				})
			},
			loadDetailInfo() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/House/FindDetail',
					data: {
						id: me.id,
						MemberId:me.memberId
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.buldingInfo = res.data.data;
							if (me.buldingInfo.house.thumb_url != null) {
								me.buldingInfo.house.thumb_url.split(",").forEach(function(item) {
									item = (item.indexOf('Attachment') != -1 ? me.imgRoot : 'http://wx.attch.we.qsace.com/') +
										item;
									me.swiperList.push(item);
								})
							}
							me.isLoading = false;

						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});
			},
			loadSalers() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/Saler/GetList',
					data: {
						HouseId: me.id,
						pageSize: 3
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.salers = res.data.items;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});
			},
			like(e){
				var me = this;
				uni.getStorage({
					key: 'UserInfo',
					success: (res) => {
						if (!res.data) {
							return;
						}
						
						uni.request({
							url: me.$rootUrl + '/Member/LikeHouse',
							data: {
								HouseId: me.buldingInfo.house.id,
								MemberId: res.data.id,
								isLike:!me.buldingInfo.isLike
							},
							method: 'Post',
							success(res) {
								if (res.data.success) {
									me.buldingInfo.isLike=!me.buldingInfo.isLike;
								} else {
									uni.showModal({
										content: '服务器错误!',
										showCancel: false
									});
								}
							},
							fail() {
								uni.showModal({
									content: me.connectionFailText,
									showCancel: false
								});
							}
						});
						
						
					},
					fail: (e) => {
						//this.toLogin(); 
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.content {

		.swiper-box {
			width: 100%;
			//height: 30.7vw;

			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				//height: 30.7vw;
				height: 40.7vh;

				swiper-item {
					image {
						width: 100%;
						//height: 30.7vw;
					}
				}
			}

			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;

				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;

					&.on {
						width: (100%/3);
					}
				}
			}
		}


		.toolbar {
			margin-top: 4px;


			.cu-item {
				padding: 10px 15px;
				width: 25%;

				.text-white {
					font-size: 30px;
					background-color: #D1372C;
					color: white;
					border-radius: 40%;
					height: 50px;
					line-height: 50px;
				}
			}

		}

		.zhuchangList {
			padding: 10px;
			justify-content: space-between;

			.zhuchang {
				background: #EBD4EF;
				border-radius: 20px;
				width: 32%;
				padding: 10px 2px;
			}

		}

		.bottom {
			position: fixed;
			bottom: 0;
			display: flex;
			flex-direction: row;
			width: 100%;
			background: white;
			text-align: center;
			border-top: #E1D7F0 1px solid;


		}
	}
</style>
